<template>
  <Blank>
    <div class="diary">
      <div class="bg">
        <img v-if="diaryUrl" :src="diaryUrl" alt="" srcset="" />
      </div>
      <div class="con">
        <div class="dia-nav">
          <div class="item" @click="getAllDiaryTypeList">
            <span>全部</span>
          </div>
          <div
            class="item"
            v-for="(item, index) in diaryTypeList"
            :key="index"
            :class="activediaryType == index ? 'active-diary-type' : ''"
            @click="getDiaryTypeList(item.id, index)"
          >
            <span>{{ item.name }}</span>
          </div>
        </div>
        <div class="dia-list" v-if="diaryList.length > 0">
          <div class="content" v-for="item in diaryList" :key="item.id">
            <div class="title" @click="gotoDetail(item.id)">
              <span>{{ item.name }}</span>
            </div>
            <div class="sub-title">副标题：{{ item.title }}</div>
            <div class="time">发布日期：{{ item.createTime }}</div>
            <p><span @click="gotoDetail(item.id)">阅读正文</span></p>
          </div>
          <div
            class="load"
            v-loading="loading"
            element-loading-text="加载中..."
          >
            <p
              v-if="currentPage < Math.ceil(totalPage / pageSize) && !loading"
              @click="loadMore"
            >
              加载更多
            </p>
          </div>
        </div>
        <div class="dia-not-list" v-else>暂无数据</div>
      </div>
    </div>
  </Blank>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import Blank from "@/components/blankCard/BlankCard.vue";
import router from "@/router";
import { getDiaryType, getDiary } from "@/api/index";

const loading = ref(false);
const pageSize = ref(5);
const totalPage = ref(null);
const currentPage = ref(1);
const diaryList = ref([]);
const diaryTypeList = ref([]);
const diaryTypeId = ref();
const activediaryType = ref(null);
const diaryUrl = localStorage.getItem("diaryUrl");

const initDiaryType = async () => {
  const res = await getDiaryType();
  if (res) {
    diaryTypeList.value = res;
  }
};
const timestampToTime = (timestamp) => {
  if (timestamp === 0 || timestamp == null) {
    return "";
  } else {
    var date = new Date(timestamp);
    var Y = date.getFullYear() + "-";
    var M =
      (date.getMonth() + 1 < 10
        ? "0" + (date.getMonth() + 1)
        : date.getMonth() + 1) + "-";
    var D =
      date.getDate() < 10 ? "0" + date.getDate() + " " : date.getDate() + " ";
    var H = date.getHours() + ":";
    var M2 =
      (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
      ":";
    var S =
      date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    return Y + M + D + H + M2 + S;
  }
};
const initDiary = async () => {
  const res = await getDiary(
    currentPage.value,
    pageSize.value,
    diaryTypeId.value
  );
  if (res && res.worksList.length > 0) {
    totalPage.value = res.totalNumber;
    res.worksList.forEach((item) => {
      item.createTime = timestampToTime(Number(item.createTime));
      diaryList.value.push(item);
      loading.value = false;
    });
  } else {
    loading.value = false;
  }
};
const getAllDiaryTypeList = () => {
  diaryTypeId.value = undefined;
  currentPage.value = 1;
  diaryList.value = [];
  totalPage.value = null;
  activediaryType.value = null;
  initDiary();
};
const getDiaryTypeList = async (id: number, index: number) => {
  diaryTypeId.value = id;
  activediaryType.value = index;
  currentPage.value = 1;
  diaryList.value = [];
  totalPage.value = null;
  initDiary();
};

const loadMore = () => {
  currentPage.value++;
  loading.value = true;
  setTimeout(() => {
    initDiary();
  }, 1000);
};
const gotoDetail = (id: number) => {
  router.push(`/diaryDetail/${id}`);
};
onMounted(() => {
  initDiaryType();
  initDiary();
});
</script>

<style lang="scss" scoped>
.diary {
  margin-top: 140px;
  .bg {
    margin: 20px 0;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .con {
    margin: 20px 0;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    .dia-list {
      width: 80%;
      .content {
        width: 80%;
        border-bottom: 1px dotted #e5e5e5;
        margin-bottom: 20px;
        .title {
          span {
            color: #888888;
            font-size: 18px;
            line-height: 24px;
            cursor: pointer;
          }
          span:hover {
            color: #0066ff;
            border-bottom: 1px solid #0066ff;
          }
        }
        .time {
          margin-top: 10px;
          color: #888888;
          font-size: 12px;
        }
        .sub-title {
          color: #999999;
          font-size: 14px;
          letter-spacing: 1px;
          margin: 10px 0;
        }
        p {
          span {
            cursor: pointer;
          }
          margin: 20px 10px;
          color: #597d7f;
          font-size: 12px;
          display: flex;
          justify-content: flex-end;
        }
      }
      .load {
        width: 80%;
        height: 60px;
        margin: 20px;
        display: flex;
        justify-content: center;
        p {
          width: 80px;
          padding: 1px 2px;
          text-align: center;
          border: 1px solid #898989;
          border-radius: 1px;
          margin: 20px 10px;
          color: #898989;
          font-size: 12px;
          cursor: pointer;
        }
      }
    }
    .dia-not-list {
      margin: 20px auto;
      color: #888888;
      font-size: 20px;
      text-align: center;
    }
    .dia-nav {
      margin-right: 20px;
      .item {
        min-width: 120px;
        text-align: center;
        border: 1px solid #e5e5e5;
        border-radius: 2px;
        padding: 10px 20px;
        margin-bottom: 20px;
        cursor: pointer;
        span {
          font-size: 15px;
          color: #494949;
          letter-spacing: 1px;
        }
      }
      .item:hover {
        border-color: rgba(73, 73, 73, 0.5);
        transition: border-color 0.4s ease;
      }
      .active-diary-type {
        border-color: rgba(73, 73, 73, 0.5);
      }
    }
  }
  @media screen and (max-width: 600px) {
    .con {
      display: block;
      .dia-list {
        width: 100%;
        .content {
          width: 100%;
        }
      }
    }
  }
}
</style>